<template>
    <div class="app-container">
        <div>
            <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
                <el-form-item label="车牌号:">
                    <el-input style="width:2.2rem" v-model="searchModel.plateNumber" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车辆类别:">
                    <el-select v-model="searchModel.selectType" placeholder="" style="width: 2.2rem"
                        @change="$forceUpdate()">
                        <el-option v-for="item in vehicleTypes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left:20px" label="司机姓名:">
                    <el-input style="width:2.2rem" v-model="searchModel.driverName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="车辆状态:">
                    <el-select v-model="searchModel.selectState" placeholder="" style="width: 2.2rem"
                        @change="$forceUpdate()">
                        <el-option v-for="item in vehicleState" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-button style="margin-left:50px" type="primary" @click="handleDownload">查询</el-button>
                <el-button style="margin-left:10px" @click="resetSearch">重置</el-button>
            </el-form>
            <!-- <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
            </el-form> -->
            <el-button style="margin-bottom:20px" type="info" @click="Addition()">新增</el-button>
            <el-table v-loading='listLoading' :data='list' element-loading-text='Loading' border fit highlight-current-row>
                <el-table-column align='center' label='序号'>
                    <template slot-scope='scope'>
                        {{ scope.$index + 1 + pageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column label='车牌号' align='center'>
                    <template slot-scope='scope'>
                        <el-link type="primary" @click='handleEdit(scope.$index, scope.row)'>{{
                            scope.row.plateNumber
                        }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label='车牌颜色' align='center'>
                    <template slot-scope='scope'>
                        <span v-if="(+scope.row.plateColor === 0)">{{ "黄色" }}</span>
                        <span v-else-if="(+scope.row.plateColor === 1)">{{ "蓝色" }}</span>
                        <span v-else="(+scope.row.plateColor === 2)">{{ "绿色" }}</span>
                    </template>
                </el-table-column>
                <el-table-column label='车牌类型' align='center'>
                    <template slot-scope='scope'>
                        <span>{{ scope.row.carType == 1 ? '小车' : '大车' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label='车牌类别' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.carCategory == 1 ? '固定车' : '临时车' }}
                    </template>
                </el-table-column>
                <el-table-column label='司机名称' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.driverName }}
                    </template>
                </el-table-column>
                <el-table-column label='司机电话' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.driverTel }}
                    </template>
                </el-table-column>
                <el-table-column label='车辆状态' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.state == 1 ? '启用' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column label='是否黑名单' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.isBlacklist == 1 ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column label='创建人' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.creationName }}
                    </template>
                </el-table-column>
                <el-table-column label='创建时间' align='center'>
                    <template slot-scope='scope'>
                        {{ scope.row.creationTime }}
                    </template>
                </el-table-column>
                <el-table-column align='center' prop='created_at2' label='操作' width="250">
                    <template slot-scope='scope'>
                        <el-button type="primary" size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
                        <el-button type="primary" size='mini' @click='dialogForm(scope.row)'>加入黑名单</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top:15px;">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                    layout="prev, pager,next,sizes,jumper" :total="total">
                </el-pagination>
            </div>
            <el-dialog title="新增黑名单" :visible.sync="dialogFormVisible" width="35%">
                <insertBlackList ref="insertBlackList" v-if="dialogFormVisible" :plateNumber="checkePlateNumber"
                    @backMain="backMain"></insertBlackList>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import insertBlackList from "./insertBlackList";
import { deleteApiBlack } from '@/api/Blacklist';
import { getApiCarList } from "@/api/Car";
import { parseTime } from "@/utils";
export default {
    components: { insertBlackList },
    data() {
        return {
            checkePlateNumber: "",
            input: "",
            listLoading: false,
            searchModel: {
                selectState: -1,
                plateNumber: '',
                driverName: '',
                selectType: -1
            },
            dialogModel: {},
            labelWidth: "90px",
            labelHeight: "32px",
            tableData: [],
            count: 0,
            currentPage: 1,
            total: 20,
            pageSize: 10,
            value2: '',
            dialogFormVisible: false,
            vehicleTypes: [
                {
                    value: -1,
                    label: '请选择'
                }, {
                    value: 1,
                    label: '固定车'
                }, {
                    value: 2,
                    label: '临时车'
                },
            ],
            vehicleState: [
                {
                    value: -1,
                    label: '请选择'
                }, {
                    value: 0,
                    label: '禁用'
                }, {
                    value: 1,
                    label: '启用'
                },
            ],
            list: [],
        }
    },
    created() {
        this.getDataList();
    },
    methods: {
        
        removeBlackList(row) {
            let data = [{
                id: row.id
            }]
            deleteApiBlack(data).then(res => {
                if (!res.error) {
                    this.$message.success("移除成功");
                    this.getDataList();
                }
            });
        },
        getDataList(search) {
            let data = {
                skipCount: ((this.currentPage <= 1 ? 1 : this.currentPage) - 1) * this.pageSize,
                MaxResultCount: this.pageSize,
            };
            if (search) {
                if (search.selectState != -1) {
                    data.state = search.selectState;
                }
                if (search.driverName != '') {
                    data.driverName = search.driverName;
                }
                if (search.plateNumber != '') {
                    data.plateNumber = search.plateNumber;
                }
                if (search.selectType != -1) {
                    data.carCategory = search.selectType
                }
            }
            console.log(data);
            getApiCarList(data).then(res => {
                if (res == null) return this.$vux.toast.text(res.message);
                else {
                    this.list = res.items;
                    this.total = res.totalCount;
                    console.log(res.items);
                    this.list.forEach(element => {
                        element.creationTime = parseTime(new Date(element.creationTime), '{y}-{m}-{d} {h}:{i}:{s}');
                    });
                }
            });
        },
        dialogForm(checkList) {
            this.checkePlateNumber = checkList.plateNumber;
            this.dialogFormVisible = true;
        },
        backMain() {
            this.dialogFormVisible = false;
            this.getDataList();
        },
        handleSizeChange(v) {
            this.pageSize = v;
            this.currentPage = 1;
            this.getDataList();
        },

        handleCurrentChange(v) {
            this.currentPage = v;
            this.getDataList();
        },
        handleDownload() {
            this.getDataList(this.searchModel);
        },
        handleEdit(id, checkList) {
            console.log(checkList, 2);
            this.$router.push({
                path: "vehicleEdit",
                query: { "checkList": checkList }
            });
        },
        Addition() {
            this.$router.push({
                path: "addVehicleInfo"
            });
        },
        resetSearch() {
            this.searchModel = {
                selectState: -1,
                plateNumber: '',
                driverName: '',
                selectType: -1
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.main {
    margin: 0.2rem;
    padding: 0.2rem;
}

#selectForm>>>.el-form-item__label {
    font-size: 12px;
}

.search-bar {
    margin-bottom: .2rem;
    text-align: left;
    margin-left: .6rem;
    margin-top: .4rem;
}

.form-span {
    font-size: 18px;
    ;
}

.block {
    margin-left: 20px;
    margin-right: .2rem;
    display: flex;
    justify-content: flex-end;
}

.move-right {
    margin-left: .5rem;
}
</style>
